<script setup>
const emit = defineEmits(['ok'])
import { updRow } from '@/api/table.js'
const { proxy } = getCurrentInstance() // 获取当前组件实例

const data = ref({
  title: '',
  visible: false
})
const model = ref({})
const formRef = ref(null) // 创建一个引用用于表单实例

// 表单验证数据
const rules = ref({
  column1: [
    { required: true, message: '请输入', trigger: 'blur' }
  ],
  column2: [
    { required: true, message: '请输入', trigger: 'blur' }
  ],
  column3: [
    { required: true, message: '请输入', trigger: 'blur' }
  ],
  column4: [
    { required: true, message: '请输入', trigger: 'blur' }
  ],
  column5: [
    { required: true, message: '请输入', trigger: 'blur' }
  ]
})
// 取消
const cancelClick = () => {
  data.value.visible = false
}
// 确定
const submitForm = async () => {
  const formEl = formRef.value
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      editData()
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 新增/编辑
const editData = () => {
  updRow(model.value).then(res => {
    if (res.status === 0) {
      proxy.$msgSuccess(res.message)
      data.value.visible = false
      emit('ok')
    } else {
      proxy.$msgWarning(res.message)
    }
  })
}
const resetForm = formEl => {
  if (!formEl) return
  formEl.resetFields()
}

// 定义给父组件调用方法
const exposedMethods = {
  add: function (titleText) {
    data.value.visible = true
    data.value.title = titleText
  },
  edit: function (titleText, rowData) {
    console.log('rowData', rowData)
    data.value.visible = true
    data.value.title = titleText
    model.value = JSON.parse(JSON.stringify(rowData))
  }
}
// 暴露方法给父组件
defineExpose(exposedMethods)
</script>

<template>
  <el-drawer v-model="data.visible" size="50%" direction="rtl">
    <template #header>
      <h4>{{ data.title }}</h4>
    </template>
    <template #default>
      <el-form
        ref="formRef"
        :model="model"
        :rules="rules"
        label-width="auto"
        size="default"
        status-icon
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="列1" prop="column1">
              <el-input v-model="model.column1" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="列2" prop="column2">
              <el-input v-model="model.column2" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="列3" prop="column3">
              <el-input v-model="model.column3" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="列4" prop="column4">
              <el-input v-model="model.column4" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="列5" prop="column5">
              <el-input v-model="model.column5" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="cancelClick">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style scoped>
</style>
